جدولها یکی از بهترین و مفیدترین عنصرها در صفحات وب میباشند، با استفاده از آنها ما می توانیم اطلاعات و عناصررا در یک صفحه سازمان دهی و مرتب کنیم . کلیه اطلاعات یا عناصر دیگر وب را میتوانیم داخل ردیف ها یا ستون های یک جدول قرار دهیم بدون آنکه خطوط جدول مشخص باشد و یا در صورت نیاز خطوط آنها نمایان میشود. کمتر کسی را پیدا میکنید که از این عنصر استفاده نکند و زمانیکه تجربه کافی برای طراحی یک سایت بدست آوردید به اهمیت این عنصر پی خواهید برد.
تگ جدول
تگ مشخصه جدول
this is a table. |
هر چه تگهای ردیف و ستون بیشتر باشد به همان اندازه ما در جدولمان خانه خواهیم داشت. مجموعه کد بالا نشان دهنده یک جدول با یک ردیف و یک ستون است یعنی این جدول دارای یک خانه میباشد. یکی از ویژگیهای جدول که محبوبیت آنرا زیاد میکند اینست که هر خانه از آن میتواند به طور مجزا زمینه رنگی و یا عکسی در زمینه آن داشته باشد البته اندازه های هر خانه هم میتواند متفاوت باشد.
border
خب برای اینکه بتوانیم یک جدول را در مرورگر خود ببینیم باید با خصوصیت border=" " آشنا شویم. این خصوصیت دور جدول یک کادردرست میکند البته اگر این خصوصیت را برابربا صفر قرار دهیم یا آنرا ننویسیم کادر دور جدول در مرورگر نمایان نخواهد شد و هر چه عدد بزرگتری بگذاریم کادر ضخیم تری خواهیم داشت، در ضمن رنگ کادرهم با bordercolor=" " که برابر با عدد هگز رنگ است تعیین میشود. border ویژگیهای دیگری هم دارد، به طور مثال شما میتوانید خصوصیت frame=" " را به تگ اضافه کرده و آنرا برابر با یکی از کلمات void, above, below, hsides, vsides,lhs, rhs, box قرار دهید تا کادر دور جدول را کنترل کنید. این کلمات هر کدام یک قسمت از کادر را نمایان میکنند.
rule
ویژگی دیگری هم هست ولی بهتره اول یک جدول درست کنید تا مطلب جا بیافتد، برنامه Notepad را باز کنید و کد زیر را وارد کرده و به اسم Table.htm ذخیره کنید:
cell 01 | cell 02 |
cell 03 | cell 04 |
حالا خصوصیت rules=" "را به تگ اضافه کنید و هر بار یکی از کلمات all, none, groups, rows, cols را جلوی آن قرار دهید و فایل را دوباره ذخیره کنید تا تاثیر این خصوصیت را ببینید.
Alignment
میتوانید با استفاده از خصوصیت align=" "که در تگ و ، قسمت بدنه را با و قسمت انتهایی را با کنترل میکنیم. این تگ دارای خصوصیت align نیز میباشد.
colgroup
همچنین با تگ میتوانید خصوصیات کلیه ستونهای یک جدول را کنترل کنید که این تگ علاوه بر خصوصیات گفته شده در این بخش دارای خصوصیت span=" " نیز میباشد که توسط آن تعداد ستونهایی که باید کنترل شوند را تعیین میکنید.
summery
یک خصوصیت دیگر نیز برای تگ
مینویسید محل قرارگرفتن یک عنصر مانند متن را تعیین کنید که میتوانید این خصوصیت را با کلمات left, right, center, justify مقداردهی کنید. height, width با خصوصیات height=" " , width=" " هم اندازه طول و عرض یک جدول را میتوان کنترل کرد که باید آنها را برابر با عدد در مقیاس پیکسل قرار دهید در ضمن شما میتوانید از درصد % هم استفاده کنید مانند width="90%" که این جدول نود درصد عرض یک صفحه را اشغال میکند. bgcolor برای تعیین رنگ زمینه یک جدول ازbgcolor=" " که با عدد هگز رنگها مقدار دهی میشود استفاده میکنیم. این خصوصیت را در تگ های | ||||
هم می توانید بکار برید. cellspacing, cellpadding تگ دو خصوصیت دیگر هم دارد که شما با بکار بردن آنها میتوانید فاصله بین خانه های جدول را از هم کنترل کنید یعنی فضای خالی بین خانه ها اضافه کنید، این خصوصیت این است cellspacing=" "و دیگری فاصله بین متن داخل یک خانه در جدول با لبه های چارچوب آن خانه است که خصوصیت cellpadding=" " این وظیفه را به عهده دارد. هرچه مقداردهی عددی آنها بزرگتر باشد فاصله ها بیشتر خواهد بود. header: l حالا که با درست کردن ردیف و ستون در جدول آشنا شدید، میتوانید برای هر ستون و ردیف عنوان گذاری کنید و یک تیتر به بالای ستون یا به ابتدای یک ردیف اضافه کنید. در هر قسمت که شما به یک تیتر و عنوان نیاز داشتید بجای تگ از تگ استفاده کنید که در این حالت متن نوشته شده در آن خانه بصورت ضخیم ظاهر شده و از بقیه متمایز میشود. colspan, rowspan گاهی اوقات شما نیاز دارید تا چند خانه در یک ردیف یا یک ستون از جدول را ترکیب کنید تا یک خانه درست شود و بطور مثال یک تیتر و عنوان در آن قرار دهید که برای ترکیب خانه های یک ستون از خصوصیت rowspan=" " و برای یک ردیف از colspan=" " در تگ در میان تگهای
thead, tbody, tfoot اگر جدول شما دارای ستونها و ردیفهای زیادی است پس تکرار خصوصیات در هر تگ مربوطه بسیار دشوار است. شما میتوانید بصورت گروهی این خصوصیات را کنترل کنید. برای کنترل ردیفها باید آنها را به سه قسمت تقسیم کرد، قسمت سرشامل فقط خانه های ردیف اول، بدنه شامل همه ردیفهای وسط و قسمت انتهایی شامل فقط خانه های آخرین ردیف، که قسمت سر را با |
به این موضوع هم توجه داشته باشید که شما میتوانید داخل یک جدول، جدول دیگری هم درست کنید یعنی داخل هرخانه جداگانه یک جدول بسازید که به این روشNested table گفته میشود.
نظرات شما عزیزان:
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |